<template>
  <div id="nav">
    <van-tabbar route>
      <van-tabbar-item to="/home" class="item">
        <template #icon="props">
            <geek-icon :name="props.active?'home-sel':'home'"></geek-icon>
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/question" class="item">
        <template #icon="props">
             <geek-icon :name="props.active?'qa-sel':'qa'"></geek-icon>
        </template>
        <span>问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/video" class="item">
        <template #icon="props">
             <geek-icon :name="props.active?'video-sel':'video'"></geek-icon>
        </template>
        <span>视频</span>
      </van-tabbar-item>
      <van-tabbar-item to="/mine" class="item">
        <template #icon="props">
            <geek-icon :name="props.active?'mine-sel':'mine'"></geek-icon>
        </template>
        <span>我的</span>
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>
<script>

export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-tabbar-item__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

/deep/ .van-tabbar-item--active {
    span {
         color: @geek-color;
    }
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #FC6627;
    }
  }
}
</style>
